<%@page import="com.wanmait.hotelManage.vo.Userinfo"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String path=request.getContextPath(); %>
    <% Userinfo userinfo=(Userinfo)request.getSession().getAttribute("userinfo"); %>
<!DOCTYPE html>
<html lang="en">
    <head>
     <jsp:include page="/FrontDesk/center/head.jsp"></jsp:include>
			<!-- /Header -->
			
			<!-- 左侧栏目 -->
            <div class="sidebar" id="sidebar">
                <div class="sidebar-inner slimscroll">
					<div id="sidebar-menu" class="sidebar-menu">
						<ul>
							<li class="menu-title"> 
								<span><i class="fe fe-home"></i> 主页</span>
							</li>
							<li class="active"> 
								<a href="<%=path%>/FrontDesk/center/profile.jsp"><span>个人中心</span></a>
							</li>
							<li> 
							<a href="<%=path%>/OrderServlet?action=myorder"><span></span>我的订单</a>
							</li>
							
						
						</ul>
					</div>
                </div>
            </div>
			<!-- /Sidebar -->
			
			<!-- 中间显示 -->
            <div class="page-wrapper">
                <div class="content container-fluid">
					
					<!-- Page Header -->
					<div class="page-header">
						<div class="row">
							<div class="col">
								<h3 class="page-title">个人中心</h3>
								<ul class="breadcrumb">
									<li class="breadcrumb-item"><a href="profile.html">主页</a></li>
									<li class="breadcrumb-item active">个人中心</li>
								</ul>
							</div>
						</div>
					</div>
					<!-- /Page Header -->
					
					<div class="row">
						<div class="col-md-12">
							<div class="profile-header">
								<div class="row align-items-center">
									<div class="col-auto profile-image">
										<a href="#">
											<img class="rounded-circle" alt="User Image" src="<%=path %>/static/images/touxiang/<%=userinfo.getPic()%>">
										</a>
									</div>
									<div class="col ml-md-n2 profile-user-info">
										<h4 class="user-name mb-0"><%=userinfo.getUsername() %></h4>
										
										<div class="pb-3"> </div>
										<div class="about-text"></div>
									</div>
									<div class="col-auto profile-btn">
									</div>
								</div>
							</div>
							<div class="profile-menu">
								<ul class="nav nav-tabs nav-tabs-solid">
									<li class="nav-item">
										<a class="nav-link active" data-toggle="tab" href="#per_details_tab">详情</a>
									</li>
									<li class="nav-item">
										<a class="nav-link" data-toggle="tab" href="#password_tab">密码</a>
									</li>
								</ul>
							</div>	
							<div class="tab-content profile-tab-cont">
								
								<!-- Personal Details Tab -->
								<div class="tab-pane fade show active" id="per_details_tab">
								
									<!-- 个人详情 -->
									<div class="row">
										<div class="col-lg-12">
											<div class="card">
												<div class="card-body">
													<h5 class="card-title d-flex justify-content-between">
														<span></span> 
														<a class="edit-link" id="user" data-toggle="modal" href="#edit_personal_details"><i id="bian" class="fa fa-edit mr-1"></i>编辑</a>
													</h5>
													<div class="row">
														<p class="col-sm-2 text-muted mb-0 mb-sm-3">名字</p>
														<p class="col-sm-10"><%=userinfo.getUsername() %></p>
													</div>
													
													
													<div class="row">
														<p class="col-sm-2 text-muted mb-0 mb-sm-3">电话</p>
														<p class="col-sm-10"><%=userinfo.getTelephoneNumber() %></p>
													</div>
													<div class="row">
														<p class="col-sm-2 text-muted mb-0">住址</p>
														<p class="col-sm-10 mb-0"><%=userinfo.getCity().getName() %><br>
														</p>
													</div>
												</div>
											</div>
										
											
										</div>

									
									</div>
									<script >
									
									</script>
									<!-- /Personal Details -->

								</div>
								<!-- /Personal Details Tab -->
								
								<!-- 改密码 -->
								<div id="password_tab" class="tab-pane fade">
								
									<div class="card">
										<div class="card-body">
											<h5 class="card-title">修改密码</h5>
											<div class="row">
												<div class="col-md-10 col-lg-6">
													<form id="myform" action="<%=path%>/UserinfoServlet?action=upduserpassword&id=<%=userinfo.getId() %>"   method="post">
														<div class="form-group">
															<label>旧密码</label>
															<input type="password" class="form-control" id="oldpassword" >
														</div>
														<div class="form-group">
															<label>新密码</label>
															<input type="password" class="form-control" name="newpassword" id="newpassword">
														</div>
														<div class="form-group">
															<label>重复新密码</label>
															<input type="password" class="form-control" id="newspassword" >
														</div>
														<button class="btn btn-primary" type="button" id="but">确认修改</button>
													</form>
												</div>
											</div>
										</div>
									</div>
								</div>
								<script src="<%=request.getContextPath() %>/static/js/jquery-3.5.1.min.js"></script>
								
								<script >
								$(function(){
									$("#but").click(function(){
										var oldPassword=<%=userinfo.getPassword()%>
										var oldsPassword=$("#oldpassword").val();
										var newpassword=$("#newpassword").val();
										var newspassword=$("#newspassword").val();
									if(oldPassword==oldsPassword){
										if(newpassword==newspassword){
											$("#myform").submit();
										}
										else {
											alert("两次密码输入不一致");
										}
									}
									else{
										alert("旧密码输入错误")
									}
									})
									
								
									
								})
								</script>
								<!-- /Change Password Tab -->
								
							</div>
						</div>
					</div>
				
				</div>			
			</div>
			<!-- /Page Wrapper -->
		
        </div>
		<!-- /Main Wrapper -->

		<!-- 编辑个人信息 -->
		<div class="modal fade" id="edit_personal_details" aria-hidden="true" role="dialog">
			<div class="modal-dialog modal-dialog-centered" role="document" >
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title">个人信息</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
						<form enctype="multipart/form-data" action="<%=path%>/UserinfoServlet?action=upduserinfo&id=<%=userinfo.getId() %>"   method="post">
							<div class="row form-row">
								<div class="col-12 col-sm-6">
									<div class="form-group">
										<label>修改名字</label>
										<input type="text" class="form-control" name="username" value="<%=userinfo.getUsername()%>">
									</div>
								</div>
								
								<div class="col-12 col-sm-6">
									<div class="form-group">
										<label>修改电话号</label>
										<input type="text" name="usertitlephone" class="form-control" value="<%=userinfo.getTelephoneNumber()%>">
									</div>
								</div>
								<div class="col-12 col-sm-6">
									<div class="form-group">
										<label>修改头像</label>
										<input type="file" class="form-control" name="userpic">
									</div>
								</div>
								<div class="col-12">
									<h5 class="form-title"><span>Address</span></h5>
								</div>
								<div class="form_con form_horizontal" id="form_con">
    <div class="form_group">
          <div class="form_item">
              <label>所在地区：</label><select class="province" name="province" id="param_province" "><option>请选择省份</option></select>
          </div>
          <div class="city">
              <label>城市：</label><select class="citys" name="city" id="param_city"><option>请选择城市</option></select>
          </div> 
     </div>
 </div>
								
							</div>
							<button type="submit" class="btn btn-primary btn-block">确认修改</button>
						</form>
					</div>
				</div>
			</div>
		</div>
		<script >
	     $(".form_group").on("change",".province",function(){
	    	var provinceId= $(".province").val();
	    	 $.ajax({
	    		 url:"<%=request.getContextPath()%>/CityServerlet",
	    		 data:{action:"idBycity",id:provinceId},
	    		 success:function(msg){
	    		
	    			 $(".citys").html(msg);
	    		 }
	    	 })
	     })
			$.ajax({
			url:"<%=request.getContextPath()%>/CityServerlet",
			data:{action:"province"},
			success:function(msg){
				$(".form_group").html(msg);
			}
				
			})

		</script>			
		<!-- /Edit Details Modal -->
		
		<!-- jQuery -->
        <script src="<%=path %>/static/assets/js/jquery-3.2.1.min.js"></script>
		
		<!-- Bootstrap Core JS -->
        <script src="<%=path %>/static/assets/js/popper.min.js"></script>
        <script src="<%=path %>/static/assets/js/bootstrap.min.js"></script>
		
		<!-- Slimscroll JS -->
        <script src="<%=path %>/static/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
		
		<!-- Custom JS -->
		<script  src="<%=path %>/static/assets/js/script.js"></script>
		
    </body>
</html>